<template>
    <div class="search-wrap">
        <div id="mescroll" class="mescroll"  v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <search @search="search" :keyword="params.query"></search>
                    <navbar :list="typeList" v-if="typeList.length" class="search-nav"></navbar>
                    <article-list :list='searchList' class="list-out" v-if="type*1===1"></article-list>
                    <activity-list :list='searchList' class="list-out" v-if="type*1===5"></activity-list>
                    <single-list :list='searchList' class="list-out" v-if="type*1===7"></single-list>
                    <div class="author-list list-out" v-for="item in searchList" v-if="type*1===8">
                        <author-item :author='item' :autype="'1'" class="out-item"></author-item>
                    </div>
                    <div class="author-list list-out" v-for="item in searchList" v-if="type*1===6">
                        <author-item :author='item' :autype="'2'" class="out-item"></author-item>
                    </div>
                    <div class="empty" v-if="searchList.length*1===0">
                        <img class="empty-img" src="../../assets/image/empty.png" alt="">
                        <div class="text-line">空空如也</div>
                    </div>
                </div>
            </div>
        </div>
        <z-footer></z-footer>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {homeService} from '../../service/homeService'
    import {actService} from '../../service/activityService'
    import searchbtn from '../../component/common/search.vue'
    import navbar from '../../component/common/navbar.vue'
    import articlelist from '../../component/list/article-list.vue'
    import activitylist from '../../component/list/activity-list.vue'
    import singlelist from '../../component/list/column-list.vue'
    import authorItem from '../../component/list/author.vue'

    export default {
        components: { 'search':searchbtn,'navbar':navbar,'article-list':articlelist,'activity-list':activitylist,'single-list':singlelist,'author-item': authorItem
        },
        // 添加以下代码
        metaInfo () {
            // console.log(this);
            const title = this.title
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: '运联' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联首页' },
                ]
            }
        },
        data () {
            return {
                title:'搜索结果',
                count:1,
                type:'',
                query:'',
                params:{},
                typeList:[
                    {id:1,tagName:'文章',tolink:{name:'search',params:{type:1}}},
//                    {id:2,tagName:'专题',tolink:{name:'search',params:{type:2}}},
//                    {id:3,tagName:'直播',tolink:{name:'search',params:{type:3}}},
//                    {id:4,tagName:'课程',tolink:{name:'search',params:{type:4}}},
                    {id:5,tagName:'活动',tolink:{name:'search',params:{type:5}}}
                    // {id:7,tagName:'付费读',tolink:{name:'search',params:{type:7}}},
                    // {id:8,tagName:'作者',tolink:{name:'search',params:{type:8}}},
                    // {id:6,tagName:'主办方',tolink:{name:'search',params:{type:6}}},
                ]
            }
        },
        asyncData({store,route}) {
            let type = route.params.type
            store.state.homeStore.page = {pageNo:1,pageSize:10}
            let params = store.state.homeStore.page
            params.query = route.params.query
            params.type = route.params.type
            function getSearchList(){
                return homeService.getSearch(params).then(function(res) {
                    store.state.homeStore.searchList = res.data.datas.datas
                    store.state.homeStore.page.total = res.data.datas.totalPage
                    store.state.homeStore.page.pageNo += 1
                })
            }
            return Promise.all([
//                getSearchList()
            ])

        },
        computed: {
            //将存在store中的数据取出
            /*typeList:{
                // getter
                get: function () { return this.$store.state.homeStore.typeList || []},
                // setter
                set: function (newValue) {return newValue}
            },*/
            searchList: {
                get: function () { return this.$store.state.homeStore.searchList || []},
                set: function (newValue) {return newValue}
            },
            page: {
                get: function () { return this.$store.state.homeStore.page || []},
                set: function (newValue) {return newValue}
            },
        },
        mounted: function() {
            let that = this
            that.type = that.$route.params.type
            that.params.query = that.$route.params.query
            that.params.type = that.$route.params.type
            // console.log(that.$route.params.type);
            that.getList()
            /*
             * 微信分享设置
             * type查看规则列表写死，
             * text.name为文章标题
             * */
            appService.getWxJssdk().then(function () {
                appService.getWxShare({hasGet:true},that.title)
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            search:function (v) {
                let that = this
                that.page.pageNo=1
                that.params.query = v
                that.$router.replace({name:'search',params:{query:v}})
            },
            //获取文章列表
            getList:function () {
                let that = this
                let store = that.$store
                that.params.pageNo = that.page.pageNo
                that.params.pageSize = that.page.pageSize
                that.getsearchList()
            },
            getsearchList(){
                let that = this
                let store = that.$store
                homeService.getSearch(that.params).then(function(res) {
                    if(!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        store.state.homeStore.searchList=res.data.datas.datas
                    }else{
                        for(let i in list){
                            store.state.homeStore.searchList.push(list[i])
                        }
                    }
                    that.page.pageNo+=1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            upCallback:function () {
                let that = this
                that.getList()
            },
        },
        watch: {
            '$route' (to, from) {
                this.type = to.params.type
                this.params.type = to.params.type
                this.page.pageNo=1
                this.getList()
            }
        },
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");
    .search-wrap{
        background:#fff;
        .banner-out{
            margin:2px 0 10px 0;
        }
        .list-out{
            margin-top:.3rem;
        }
        .search-nav{
            height:1.0667rem;
            text-align:center;
            font-size:.426rem;
            a{color:#666;}
            >div {
                flex: 1;
            }
            .single-bottom{
                line-height:1.0667rem;
                padding-left: 0;
            }
        }
        .author-box {
            clear: both;
            padding: .3733rem .4rem .35rem 2.4rem;
            position: relative;
            height: 1.6533rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .subscrib-box{
            display:none;
        }

        .empty {
            text-align: center;
            position: absolute;
            background: #fff;
            padding-top: 100px;
            width: 100%;
            z-index: 9;
            top: 2.3rem;
            .empty-img {
                height: 140px;
            }
            .text-line{
                text-align:  center;
                padding-top:20px;
                font-size: 15px;
                color: #999999;
                letter-spacing: 1.25px;
            }
        }


    }

</style>
